<template>
  <div class="hello">
    <h4>欢迎使用管理后台！</h4>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="line-height: 36px;">数据统计</span>
      </div>
      <div>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>人数</span>
            <span style="font-size: 80%; font-style: italic;">按范围统计：</span>
            <el-select v-model="regionValue.province" @change="onProvinceValueChange" placeholder="请选择省份" size="small" :disabled="totalData.counting">
              <el-option
                v-for="item in regionData.province.regions"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
            <el-select v-model="regionValue.city" @change="onCityValueChange" placeholder="请选择城市" size="small" :disabled="totalData.counting">
              <el-option
                v-for="item in regionData.city.regions"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
            <el-select v-model="regionValue.district" placeholder="请选择辖区" size="small" :disabled="totalData.counting">
              <el-option
                v-for="item in regionData.district.regions"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
            <el-button type="primary" size="small" @click="updateTotal" :disabled="totalData.counting">统计</el-button>
            <el-button type="primary" size="small" @click="resetTotal" :disabled="totalData.counting">重置</el-button>
          </div>
          <div>
            <ul>
              <span style="font-weight: bold;" v-if="totalData.counting">正在计算...</span>
              <li>
                用户总数：{{totalData.total}}
              </li>
              <li>
                {{totalData.userTotal.name}}：
                男性 {{totalData.userTotal.value.male}} {{totalData.userTotal.sub_fix}} /
                女性 {{totalData.userTotal.value.female}} {{totalData.userTotal.sub_fix}} /
                未设置性别 {{totalData.userTotal.value.other}} {{totalData.userTotal.sub_fix}}
              </li>
              <li>
                {{totalData.vipUserTotal.name}}：
                男性 {{totalData.vipUserTotal.value.male}} {{totalData.vipUserTotal.sub_fix}} /
                女性 {{totalData.vipUserTotal.value.female}} {{totalData.vipUserTotal.sub_fix}} /
                未设置性别 {{totalData.vipUserTotal.value.other}} {{totalData.vipUserTotal.sub_fix}}
              </li>
              <li>
                {{totalData.onlineVipUser.name}}：
                男性 {{totalData.onlineVipUser.value.male}} {{totalData.onlineVipUser.sub_fix}} /
                女性 {{totalData.onlineVipUser.value.female}} {{totalData.onlineVipUser.sub_fix}} /
                未设置性别 {{totalData.onlineVipUser.value.other}} {{totalData.onlineVipUser.sub_fix}}
              </li>
              <li>
                {{totalData.onlineUser.name}}：
                男性 {{totalData.onlineUser.value.male}} {{totalData.onlineUser.sub_fix}} /
                女性 {{totalData.onlineUser.value.female}} {{totalData.onlineUser.sub_fix}} /
                未设置性别 {{totalData.onlineUser.value.other}} {{totalData.onlineUser.sub_fix}}
              </li>
              <li>
                {{totalData.payNums.name}}：
                男性 {{totalData.payNums.value.male}} {{totalData.payNums.sub_fix}} /
                女性 {{totalData.payNums.value.female}} {{totalData.payNums.sub_fix}} /
                未设置性别 {{totalData.payNums.value.other}} {{totalData.payNums.sub_fix}}
              </li>
            </ul>
          </div>
        </el-card>

        <el-card class="box-card">
          <div slot="header" class="clearfix">
            会员费收入
          </div>
          <div>
            <ul>
              <li>{{totalData.incomeTotal.name}}：{{totalData.incomeTotal.value}} {{totalData.incomeTotal.sub_fix}}</li>
            </ul>
          </div>
        </el-card>
      </div>
    </el-card>

    <div style="display: none;">
      <ListContainer ref="ProvinceList"
                     resource-uri="address/region"
                     resource-name="region"
                     :params="regionData.province.params"
                     v-on:fetched="onProvinceListFetched">
      </ListContainer>
      <ListContainer ref="CityList"
                     resource-uri="address/region"
                     resource-name="region"
                     :params="regionData.city.params"
                     v-on:fetched="onCityListFetched">
      </ListContainer>
      <ListContainer ref="DistrictList"
                     resource-uri="address/region"
                     resource-name="region"
                     :params="regionData.district.params"
                     v-on:fetched="onDistrictListFetched">
      </ListContainer>
      <ListContainer ref="PersonList"
                     resource-uri="social/person"
                     resource-name="person"
                     :params="personListParams"
                     v-on:fetched="onPersonListFetched">
      </ListContainer>
      <ListContainer ref="LedgerList"
                     resource-uri="finance/ledger"
                     :params="ledgerParams"
                     resource-name="ledger"
                     v-on:fetched="onLedgerListFetched">
      </ListContainer>
    </div>
  </div>
</template>

<script>
  import ListContainer from './ListContainer.vue'

  export default {
    data () {
      return {
        totalData: {
          total: 0,
          counting: true,
          userTotal: {
            name: '社交用户总数',
            value: {
              male: 0,
              female: 0,
              other: 0
            },
            sub_fix: '人'
          },
          vipUserTotal: {
            name: '社交会员总数',
            value: {
              male: 0,
              female: 0,
              other: 0
            },
            sub_fix: '人'
          },
          onlineVipUser: {
            name: '在线会员人数',
            value: {
              male: 0,
              female: 0,
              other: 0
            },
            sub_fix: '人'
          },
          onlineUser: {
            name: '在线非会员人数',
            value: {
              male: 0,
              female: 0,
              other: 0
            },
            sub_fix: '人'
          },
          payNums: {
            name: '正常付费人数',
            value: {
              male: 0,
              female: 0,
              other: 0
            },
            sub_fix: '人'
          },
          incomeTotal: {
            name: '会员费收入总额',
            value: '正在计算...',
            sub_fix: '元'
          }
        },
        regionValue: {
          province: null,
          city: null,
          district: null
        },
        regionData: {
          province: {
            params: {
              type: 'province'
            },
            regions: []
          },
          city: {
            params: {
              type: 'city',
              region_id: null
            },
            regions: []
          },
          district: {
            params: {
              type: 'district',
              region_id: null
            },
            regions: []
          }
        },
        personListParams: {
          is_statistics: 1
        },
        ledgerParams: {
          user_id: '',
          account: 'vip_contract_income',
          is_statistics: 1
        }
      }
    },
    methods: {
      onProvinceListFetched (data) {
        this.regionData.province.regions = data
      },
      onCityListFetched (data) {
        this.regionData.city.regions = data
      },
      onDistrictListFetched (data) {
        this.regionData.district.regions = data
      },
      onProvinceValueChange (value) {
        if (this.totalData.counting) {
          return
        }
        console.log(value)
        this.regionData.city.params = {
          type: 'city',
          region_id: value
        }
        this.regionValue.city = null
      },
      onCityValueChange (value) {
        if (this.totalData.counting) {
          return
        }
        console.log(value)
        this.regionData.district.params = {
          type: 'district',
          region_id: value
        }
        this.regionValue.district = null
      },
      onPersonListFetched (data) {
        console.log(data[0].total)
        this.totalData.total = data[0].total
        this.totalData.userTotal.value.male = data[0].user_male_total
        this.totalData.userTotal.value.female = data[0].user_female_total
        this.totalData.userTotal.value.other = data[0].user_other_total

        this.totalData.vipUserTotal.value.male = data[0].vip_male_total
        this.totalData.vipUserTotal.value.female = data[0].vip_female_total
        this.totalData.vipUserTotal.value.other = data[0].vip_other_total

        this.totalData.onlineVipUser.value.male = data[0].online_vip_male_total
        this.totalData.onlineVipUser.value.female = data[0].online_vip_female_total
        this.totalData.onlineVipUser.value.other = data[0].online_vip_other_total

        this.totalData.onlineUser.value.male = data[0].online_male_total
        this.totalData.onlineUser.value.female = data[0].online_female_total
        this.totalData.onlineUser.value.other = data[0].online_other_total

        this.totalData.payNums.value.male = data[0].paynums_male_total
        this.totalData.payNums.value.female = data[0].paynums_female_total
        this.totalData.payNums.value.other = data[0].paynums_other_total
        this.totalData.counting = true

        if (this.$refs.PersonList.page_count > this.$refs.PersonList.page) {
          this.$refs.PersonList.page++
        } else {
          this.totalData.counting = false
        }
      },
      onLedgerListFetched (data) {
        if (typeof this.totalData.incomeTotal.value !== 'number') {
          this.totalData.incomeTotal.value = 0.00
        }
        console.log(data[0])
        this.totalData.incomeTotal.value = data[0].total_amount

        if (this.$refs.LedgerList.page_count > this.$refs.LedgerList.page) {
          this.$refs.LedgerList.page++
        }
      },
      resetData () {
        this.totalData.total = 0
        this.totalData.userTotal.value.male = 0
        this.totalData.userTotal.value.female = 0
        this.totalData.userTotal.value.other = 0
        this.totalData.vipUserTotal.value.male = 0
        this.totalData.vipUserTotal.value.female = 0
        this.totalData.vipUserTotal.value.other = 0

        this.$refs.PersonList.total_items = 0
        this.$refs.PersonList.page = 1

        this.totalData.onlineUser.value.male = 0
        this.totalData.onlineUser.value.female = 0
        this.totalData.onlineUser.value.other = 0
        this.totalData.onlineVipUser.value.male = 0
        this.totalData.onlineVipUser.value.female = 0
        this.totalData.onlineVipUser.value.other = 0

        this.totalData.payNums.value.male = 0
        this.totalData.payNums.value.female = 0
        this.totalData.payNums.value.other = 0
      },
      updateTotal () {
        console.log(this.regionValue)

        if (this.totalData.counting) {
          return false
        } else {
          this.totalData.counting = true
        }

        this.resetData()

        let tempParams = {}
        if (this.regionValue.province) tempParams.census_register_address_province = this.regionValue.province
        if (this.regionValue.city) tempParams.census_register_address_city = this.regionValue.city
        if (this.regionValue.district) tempParams.census_register_address_district = this.regionValue.district
        tempParams.is_statistics = 1
        this.personListParams = {
          ...tempParams
        }
      },
      resetTotal () {
        console.log(this.regionValue)

        if (this.totalData.counting) {
          return false
        } else {
          this.totalData.counting = true
        }

        this.regionValue.province = null

        this.resetData()

        this.personListParams = {}
        let tempParams = {}
        tempParams.is_statistics = 1
        this.personListParams = {
          ...tempParams
        }
      }
    },
    components: {
      ListContainer
    }
  }
</script>

<style scoped>
  div.hello {
    min-height: 100%;
  }

  div.box-card {
    margin-bottom: 1rem;
  }
  .el-button + .el-button {
    margin-left: 2px;
  }
</style>
